<!--
  author: tangcheng_cd
  create by: 2020/6/22
  descr:
-->
<template>
    <vue-treeselect
        v-loading="treeLoading"
        :value="treeValue"
        @input="treeValueChange"
        :options="options"
        placeholder="选择部门"
        class="depts-tree-select"
    />
</template>

<script type="text/ecmascript-6">
    import {
        USER_DEPTS
    } from '@api/url'
    import ajax from '@api/ajax'

    export default {
        name: 'depts-tree-select',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                required: true
            }
        },
        data () {
            return {
                treeValue: [],
                options: [],
                treeLoading: false
            }
        },
        methods: {
            // 获取部门列表
            getDeptsList () {
                this.treeLoading = true
                ajax.post(USER_DEPTS).then(res => {
                    this.treeValue = res.data.treeValue
                    this.options = res.data.options
                }).catch(err => {
                    console.error('加载部门树形数据出错！', err)
                }).finally(() => {
                    this.treeLoading = false
                })
            },
            treeValueChange (value) {
                this.treeValue = value
                this.$emit('change', this.treeValue)
            },
            reloadData () {
                this.getDeptsList()
            }
        },
        created () {
            this.treeValue = this.value
            this.getDeptsList()
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.depts-tree-select
    width auto
    .vue-treeselect__control
        height 28px
        line-height 28px
        margin-top 7px
        .vue-treeselect__menu
            z-index 99999
</style>
